<template>
  <div class="containerBox">
    <button class="back" v-show="!$store.state.isShow" @click="back">返回</button>
    <el-tabs v-model="activeName" type="card" v-show="$store.state.isShow" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first"></el-tab-pane>
      <el-tab-pane label="未付款" name="second"></el-tab-pane>
      <el-tab-pane label="待发货" name="third"></el-tab-pane>
      <el-tab-pane label="已发货" name="fourth"></el-tab-pane>
      <el-tab-pane label="已收货" name="fifth"></el-tab-pane>
      <el-tab-pane label="已评价" name="sixth"></el-tab-pane>
      <el-tab-pane label="退款中" name="seventh"></el-tab-pane>
      <el-tab-pane label="退款完成" name="eighth"></el-tab-pane>
      <el-tab-pane label="已关闭" name="ninth"></el-tab-pane>
    </el-tabs>
    <div v-show="$store.state.isShow" class="tableList">
      <table>
        <tr>
          <td>商品名称</td>
          <td>单价（元）</td>
          <td>数量</td>
          <td>实付款（元）</td>
          <td>收货信息</td>
          <td>卖家</td>
          <td>类型</td>
          <td>状态</td>
          <td>操作</td>
        </tr>
        <tbody v-for="(item, index) in orderList" :key="'05' + index">
          <tr>
            <td colspan="9" class="number">
              订单编号：{{item.number}} &nbsp;&nbsp;&nbsp; 下单时间：{{item.placeAnOrderTime}}
            </td>
          </tr>
          <tr>
            <td>
              <div class="goods" v-for="(items, index) in item.goodsList" :key="'01'+index">
                {{items.goodName}}
              </div>
            </td>
            <td>
              <div class="goods" v-for="(items, index) in item.goodsList" :key="'02'+index">
                {{items.unitPrice}}
              </div>
            </td>
            <td>
              <div class="goods" v-for="(items, index) in item.goodsList" :key="'03'+index">
                {{items.number}}
              </div>
            </td>
            <td>
              <p>{{item.actualPayment}}</p>
              含运费{{item.freight}}
            </td>
            <td class="receivingInformation">
              <p>
                {{item.receivingInformation.consignee}}
              </p>
              <p>
                {{item.receivingInformation.consigneePhone}}
              </p>
              <p>
                {{item.receivingInformation.consigneeAddress}}
              </p>
            </td>
            <td>{{item.seller}}</td>
            <td>{{item.orderType}}</td>
            <td>{{item.state}}</td>
            <td>
              <a @click="doSomeThing('checkDetail')">订单详情</a>
              <a @click="doSomeThing('modifyPrice')" v-if="item.state === '未付款'">修改价格</a>
              <a @click="doSomeThing('deliverGoods')" v-if="item.state === '未发货'">发货</a>
              <a @click="doSomeThing('modifyAddress')" v-if="item.state === '未发货'">修改收货地址</a>
            </td>
          </tr>
        </tbody>
      </table>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25, 30]"
        :page-size="15"
        layout="total, sizes, prev, pager, next, jumper"
        :total="orderList.length">
      </el-pagination>
    </div>
    <el-dialog
      title="修改价格"
      :visible.sync="isShowModal"
      width="800px"
    >
      请输入修改价格值： <input type="number" v-model="modifyPrice">元<br/>
      <button @click="doSomeThing('sureModify')" >确定</button>
    </el-dialog>
    <router-view v-show="!$store.state.isShow"></router-view>
  </div>
</template>

<script>
export default {
  name: 'orderList',
  data () {
    return {
      modifyPrice: null,
      isShowModal: false,
      currentPage: 1,
      activeName: 'first',
      orderList: [
        {
          number: '3748574857485765897090302485',
          goodsList: [
            {
              goodName: '朗诺1号',
              unitPrice: 10,
              number: 1,
              freight: 0.5

            }, {
              goodName: '朗诺2号',
              unitPrice: 10,
              number: 2,
              freight: 0.5
            }
          ],
          actualPayment: 21.5,
          freight: 1.5,
          receivingInformation: {
            consignee: '馮寳寳',
            consigneePhone: '12345678901',
            consigneeAddress: '杭州市拱墅区华滋科欣创意园2幢608'
          },
          seller: '朗诺',
          orderType: '普通订单',
          state: '未付款',
          placeAnOrderTime: '2018.10.16 10:30'
        },
        {
          number: '3746574857485765897090302485',
          goodsList: [
            {
              goodName: '朗诺3号',
              unitPrice: 10,
              number: 1,
              freight: 0.5

            }, {
              goodName: '朗诺4号',
              unitPrice: 10,
              number: 2,
              freight: 0.5
            }
          ],
          actualPayment: 21.5,
          freight: 1.5,
          receivingInformation: {
            consignee: '馮寳寳',
            consigneePhone: '12345678901',
            consigneeAddress: '杭州市拱墅区华滋科欣创意园2幢608'
          },
          seller: '朗诺',
          orderType: '普通订单',
          state: '未发货',
          placeAnOrderTime: '2018.10.16 10:30'
        },
        {
          number: '3748574857485765897765302485',
          goodsList: [
            {
              goodName: '朗诺1号',
              unitPrice: 10,
              number: 1,
              freight: 0.5
            }
          ],
          actualPayment: 10.5,
          freight: 0.5,
          receivingInformation: {
            consignee: '馮寳寳',
            consigneePhone: '12345678901',
            consigneeAddress: '杭州市拱墅区华滋科欣创意园2幢608'
          },
          seller: '朗诺',
          orderType: '普通订单',
          state: '未付款',
          placeAnOrderTime: '2018.10.16 10:30'
        }
      ]
    }
  },
  mounted () {
    this.$store.commit('isShowFn', true)
  },
  methods: {
    back () {
      this.$store.commit('isShowFn', true)
      this.$router.push({name: 'orderList'})
    },
    handleClick (tab) {
      console.log(tab.name)
    },
    doSomeThing (type) {
      if (type === 'checkDetail') {
        this.$message({
          type: 'info',
          message: '查看订单'
        })
        this.$store.commit('isShowFn', false)
        this.$router.push({name: 'orderDetail'})
      } else if (type === 'modifyPrice') {
        this.$message({
          type: 'info',
          message: '修改价格'
        })
        this.isShowModal = true
      } else if (type === 'deliverGoods') {
        this.$message({
          type: 'info',
          message: '发货'
        })
      } else if (type === 'modifyAddress') {
        this.$message({
          type: 'info',
          message: '修改收货地址'
        })
      } else if (type === 'sureModify') {
        if (!this.modifyPrice) {
          this.$message({
            type: 'error',
            message: '错误的数字值！'
          })
          return false
        }
        this.$message({
          type: 'info',
          message: '确定修改价格'
        })
        this.isShowModal = false
      }
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped lang="less">
  .containerBox{
   /deep/ .el-tabs  .el-tabs__nav-scroll{
      background: #fff;
     padding:0 30px;
    }
    /deep/ .el-tabs--card>.el-tabs__header .el-tabs__nav{
      border:none;
    }
    /deep/ .el-tabs--card>.el-tabs__header .el-tabs__item{
      border-left:none;
      border-bottom: 3px solid #fff;
      padding:0;
      margin: 0 15px;
      font-size:16px;
      line-height:50px;
      height:50px;
    }
    /deep/ .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
      border-bottom: 3px solid #008fff;
    }
    table{
      width:100%;
      tr{
        background: #fff;
        td *{
          font-size:14px ;
        }
        td{
          font-size:14px ;
          text-align: center;
          padding:10px 0;
          line-height:30px;
          a{
            width:100%;
          }
          .goods{
            border-bottom: 1px solid #e5e5e5;
            padding:20px 0;
          }
          .goods:last-child{
            border:none;
          }
        }
        .number{
          text-align: left;
          padding-left:5%;
          background: #939bcc;
          color:#fff;
          font-size:14px;
        }
      }
      tr:first-child{
        td{
          line-height:40px;
          font-size:16px;
        }
      }
    }
    .el-pagination{
      margin-top: 40px;
      text-align: center;
    }
  }
  .el-dialog {
    input{
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      border:1px solid #e5e5e4;
      width:150px;
      margin:0 10px;
      line-height:30px;
      padding:0 10px;
    }
    button{
      margin-left:700px;
      background: #008fff;
      color:#fff;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      line-height: 40px;
      padding:0 10px;
    }
  }

</style>
